<template>
    <div class="order">
      <div class="order__price">实付金额 &yen;{{calculations.price}}</div>
      <div class="order__btn" @click="() => handleShowConfirmChange(true)">提交订单</div>
    </div>
    <div
    class="mask"
    v-show="showConfirm"
    @click="() => handleShowConfirmChange(false)"
    >
        <div class="mask__content">
            <h3 class="mask__content__title">确认要离开收银台?</h3>
            <p class="mask__content__desc">请尽快完成支付,否则将被取消!</p>
            <div class="mask__content__btns">
                <div
                class="mask__content__btn mask__content__btn--first"
                @click="() => handleConfirmOrder(true)"
                >
                取消订单</div>
                <div
                class="mask__content__btn mask__content__btn--last"
                @click="() => handleConfirmOrder(false)"
                >确认支付</div>
            </div>
        </div>
        <Toast v-if="show" :message="toastMessage" />
    </div>
</template>

<script>
import { ref } from 'vue'
import { useStore } from 'vuex'
import { useRouter, useRoute } from 'vue-router'
import { post } from '../../utils/request'
import { useCommonCartEffect } from '../../effects/cartEffects'
import Toast, { useToastEffect } from '../../components/Toast'
// 下单相关逻辑
const useMakeOrderEffect = (shopId, shopName, productList, showToast) => {
  const router = useRouter()
  const store = useStore()
  // 判断购物车商品
  const handleConfirmOrder = async (isCanceled) => {
    const products = []
    for (const i in productList.value) {
      const product = productList.value[i]
      products.push({ id: product._id, num: product.count })
    }
    try {
      const result = await post('/api/order', {
        addressId: 1,
        shopId,
        shopName: shopName.value,
        isCanceled,
        products
      })
      if (result?.errno === 0) {
        store.commit('clearCartData', shopId)
        router.push({ name: 'OrderList' })
      }
    } catch (e) {
      showToast('下单失败')
    }
  }
  return { handleConfirmOrder }
}
// 蒙层逻辑
const useShowMaskEffect = () => {
  const showConfirm = ref(false)
  const handleShowConfirmChange = (status) => {
    showConfirm.value = status
  }
  return { handleShowConfirmChange, showConfirm }
}

export default {
  name: 'Order',
  components: { Toast },
  setup () {
    const route = useRoute()
    const shopId = parseInt(route.params.id, 10)
    const { show, toastMessage, showToast } = useToastEffect()
    const { calculations, shopName, productList } = useCommonCartEffect(shopId)
    const { handleConfirmOrder } = useMakeOrderEffect(shopId, shopName, productList, showToast)
    const { handleShowConfirmChange, showConfirm } = useShowMaskEffect()
    return {
      calculations,
      handleConfirmOrder,
      show,
      toastMessage,
      showToast,
      showConfirm,
      handleShowConfirmChange
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../style/variables.scss";
.order {
  display: flex;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.49rem;
  line-height: 0.49rem;
  background: $bgColor;
  &__price {
    flex: 1;
    font-size: .14rem;
    color: $content-fontcolor;
    text-indent: .24rem;
  }
  &__btn {
    width: 0.98rem;
    background: $btns-bgColor;
    color: $bgColor;
    text-align: center;
    font-size: .14rem;
  }
}
.mask {
    z-index: 1;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.5);
    &__content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 3rem;
        height: 1.56rem;
        background-color: $bgColor;
        border-radius: .04rem;
        text-align: center;
        &__title {
            margin: 0.24rem 0 0 0;
            line-height: 0.26rem;
            font-size: .18rem;
            color: $content-fontcolor;
        }
        &__desc {
            margin: .08rem 0 0 0;
            font-size: .14rem;
            color: $medium-fontColor;
        }
        &__btns {
            display: flex;
            margin: .24rem .58rem;
        }
        &__btn {
            flex: 1;
            width: 0.8rem;
            line-height: 0.32rem;
            border: .01rem solid $btns-bgColor;
            border-radius: .18rem;
            font-size: .14rem;
            &--first {
                margin-right: 0.12rem;
                color: $btns-bgColor;
            }
            &--last {
                margin-left: 0.12rem;
                background: $btns-bgColor;
                color: $bgColor;
            }
        }
    }
}
</style>
